<!-- 记录查看 -->
<template>
  <div class="record-container">
    <TitleBar title="记录详情"></TitleBar>
    <BackgroundBox v-loadings="props.Loading">
      <div class="main" v-if="tableData.length">
        <el-table :data="props.tableData" style="width: 100%">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            v-for="(item, index) in fieldData"
            :key="index"
            :align="'center'"
          >
            <template #default="scope" v-if="item.type">
              <div
                style="display: flex; align-items: center"
                v-if="item.type === 'time'"
              >
                <Icon type="getUpRecord"></Icon>
                <span style="margin-left: 10px">{{
                  moment(scope.row[item.prop]).format("YYYY-MM-DD")
                }}</span>
              </div>
              <div
                :class="{
                  NotTime: scope.row[item.prop] === 0,
                  OnTime: scope.row[item.prop] === 1,
                  NotClocked: scope.row[item.prop] === -1,
                }"
                v-if="item.type === 'state'"
              ></div>
              <div v-if="item.type === 'date'"  style="align-items: center">
                  
                  <span style="margin-left: 10px">{{
                    moment(scope.row[item.prop]).format("HH:mm")
                  }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="props.page"
            :default-page-size="5"
            :total="props.total"
            @current-change="currentChange"
          />
        </div>
      </div>
      <div class="unavailable" v-else>
        <Unavailable></Unavailable>
      </div>
    </BackgroundBox>
  </div>
</template>

<script setup>
import TitleBar from "@/components/TitleBar/index.vue";
import BackgroundBox from "@/components/BackgroundBox/index.vue";
import Icon from "@/components/Icon/index.vue";
import Unavailable from "@/components/Unavailable/index.vue";
import moment from "moment";
import { watchEffect } from "vue";
const emit = defineEmits(["currentChange"]);
const props = defineProps({
  tableData: {
    type: Array,
    required: true,
  },
  total: {
    type: Number,
    default: 0,
  },
  fieldData: {
    type: Array,
    required: true,
  },
  page: {
    type: Number,
    default: 1,
  },
  Loading: {
    type: Boolean,
    default: false,
  },
});
const currentChange = (value) => {
  emit("currentChange", value);
};
</script>

<style lang="less" scoped>
@import "@/styles/mixin.less";
@import "@/styles/var.less";
.record-container {
  width: 100%;

  padding-bottom: 60px;
  .back-container {
    padding: 20px 20px;

    .main {
      min-height: 300px;
      position: relative;
    }
    .unavailable {
      min-height: 150px;
    }
    .pagination {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .NotTime {
    .self-state(@danger);
  }
  .OnTime {
    display: block;
    .self-state(@success);
  }
  .NotClocked {
    .self-state(@Info);
  }
}
</style>